<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="header">
        <div class="container">
            <div class="logo">
                <a href="/"><img src="img/header_logo.png" alt=""></a>
            </div>
            <div class="header-login" id="jumpLogin"><a href="login.html">登录</a></div>
            <div class="header-login" id="jumpMy"><a href="my-order.html">个人中心</a></div>
            <div class="nav">
                <ul>
                    <li><a href="">全系产品</a></li>
                    <li><a href="friend.html">技术伙伴</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="">售后服务</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="banner">
        <div class="container">
            <div class="banner-title">除了中国芯 哪里都一样</div>
            <div class="banner-content">左象全系产品均采用台湾络达芯片</div>
            <div class="banner-wrap">
                <div class="banner-item">
                    <img src="img/index/pic1.png">
                    <div class="item-title">2代标准版</div>
                </div>
                <div class="banner-item">
                    <img src="img/index/pic2.png">
                    <div class="item-title">2代升级版</div>
                </div>
                <div class="banner-item">
                    <img src="img/index/pic3.png">
                    <div class="item-title">PRO降噪版</div>
                </div>
            </div>
        </div>
    </div>

    <div class="ad">
        <div class="container">
            <div class="ad-title">最好的材料 只为完美还原</div>
            <div class="ad-content">全系产品采用行业内顶尖供应商 详细了解</div>
            <div class="ad-pic">
                <img src="./img/index/banner1.png" alt="">
            </div>
        </div>
    </div>

    <div class="after container">
        <div class="after-item">
            <div class="repair">
                <div class="repair-title">更多保障 支持官方寄修</div>
                <div class="repair-content">
                    左象产品全系支持官方寄修服务 无需找卖家 直接找我们
                    <p><a href="">详细了解 > </a></p>
                </div>
            </div>
            <div style="flex: 2;">
                <img src="img/index/banner2.png">
            </div>
        </div>
        <div class="after-item">
            <div class="accident-pic">
                <img src="img/index/accident-pic.png" alt="">
            </div>
            <div class="accident-wrap">
                <div class="wrap-item">
                    <img src="img/index/accident-icon1.png" alt="">
                    <p>由 Zoang 认证，长达 2 年的售后 服务</p>
                </div>
                <div class="wrap-item">
                    <img src="img/index/accident-icon2.png" alt="">
                    <p>优先获得技术支持</p>
                </div>
                <div class="wrap-item">
                    <img src="img/index/accident-icon3.png" alt="">
                    <p>获得 12 个月最多两次意外损坏 保修服务</p>
                </div>
                <div class="wrap-item">
                    <img src="img/index/accident-icon4.png" alt="">
                    <p>电池维修服务</p>
                </div>
            </div>
            <div class="accident-content">
                <div class="content-title">意外？嘻嘻 ^_^ 有意外险 不怕！</div>
                <div class="content-content">
                    如果你认为在你手上，耳机会出现意外？ 加购运费险，保障一整年
                    <p><a href=""> 详细了解 ></a></p>
                </div>
            </div>
        </div>
    </div>

    <div class="recommend">
        <div class="recommend-title">推荐给朋友，为你 <span>豪气</span> 免单！！</div>
        <div class="recommend-content">详细了解 > </div>
    </div>


    <div class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-content-item">
                    <div class="footer-item-title">订单服务</div>
                    <ul>
                        <li><a href="">购买指南</a></li>
                        <li><a href="">送货政策</a></li>
                    </ul>
                </div>
                <div class="footer-content-item">
                    <div class="footer-item-title">服务支持</div>
                    <ul>
                        <li><a href="">意外险</a></li>
                        <li><a href="">售后服务</a></li>
                    </ul>
                </div>
                <div class="footer-content-item">
                    <div class="footer-item-title">关注我们</div>
                    <ul>
                        <li><a href="">新浪微博</a></li>
                        <li><a href="">官方微信</a></li>
                    </ul>
                </div>
                <div class="footer-content-item">
                    <div class="footer-item-title">代理合作</div>
                    <ul>
                        <li><a href="">加入我们</a></li>
                        <li><a href="">团购活动</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-logo">
                <img src="img/footer_logo.png">
            </div>
        </div>
    </div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://www.jq22.com/demo/message201905252258/message.js"></script>
<script src="js/index.js"></script>

</html>